School
Work
At their core:
We should be concerned with:
Frame communication around these
mygraph.dot
Generate a PNG
Scale the PNG
Export to SVG
digraph g {
client [label="client"]
load_balancer [label="load\nbalancer"]
server [label="server"]
db [shape="cylinder" label="db"]
files [shape="folder" label="file\nbucket"]
client -> load_balancer [label="request"]
load_balancer -> server [label="route"]
server -> {
files
db
} [label="request"]
}Structure Narrative
CSS
SCSS
Source: SCSS Documentation
import React from 'react';
import {StyleSheet, Text} from 'react-native';
import {
SafeAreaView,
SafeAreaProvider
} from 'react-native-safe-area-context';
const App = () => (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<Text style={styles.title}>React Native</Text>
</SafeAreaView>
</SafeAreaProvider>
);
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: '#eaeaea',
},
title: {
marginTop: 16,
paddingVertical: 8,
borderWidth: 4,
borderColor: '#20232a',
borderRadius: 6,
backgroundColor: '#61dafb',
color: '#20232a',
textAlign: 'center',
fontSize: 30,
fontWeight: 'bold',
},
});
export default App;Source: React Native Docs - Stylesheet
VSCode Open Configure Snippets
VSCode Open Snippets File
VSCode Snippet Graph Template
VSCode Snippet Cluster Colors
Add to
Obsidian Inline Graphviz
Obsidian Community Plugins - Graphviz
Obsidian Graph View
Obsidian Graph View - Filtered to Tag
Obsidian Inline Mermaid